<!--
 * @FileDescription 标定列表
 * @Author lz
 * @Date 20230224 14:41:53
 * @LastEditors lz
 * @LastEditTime 20230224 14:41:53
-->
<template>
    <div class="install_list" v-if="state.show == false" @mousemove="mousemove()" @mouseenter="mouseenter()"
        @mouseleave="mouseleave()">
        <div class="tit">标定项目</div>
        <img src="/colImages/DecorativeLine_l.png" class="line">
        <img src="/colImages/packUp.png" class="packUp" @click="show()">
        <div class="listBox">
            <div class="ContentListBox">
                <a-menu mode="inline" :openKeys="state.openKeys" @openChange="onOpenChange"
                    v-model:selectedKeys="state.selectedKeys">
                    <a-sub-menu v-for="(item, index) in installContent.Default.InstallProData.value" :key="item.Name"
                        :class="item.State == 1 ? 'accomplish' : ''">
                        <template #title> <img v-if="item.State == 1" src="/colImages/tab_icon.png" class="tab_icon"> {{
                            item.Name }} ( {{ item.Counter }} ) </template>
                        <a-menu-item v-for="(items, indexs) in item.Steps" :key="items.Id" class="IsCompleteStyle"
                            :class="items.State == 1 ? 'accomplish' : items.Id == HomeContent.Default.IDCorrente.value ? 'corrente' : ''">
                            <img v-if="items.State == 1" src="/colImages/tab_icon.png" class="tab_icon_2"> <span
                                class="textBox">{{ items.Name }}</span>
                            <img src="/colImages/skipBox.png" @click="GetNode(items)" class="skipBox">
                        </a-menu-item>
                    </a-sub-menu>
                </a-menu>
            </div>
        </div>
    </div>
    <div class="StowedState" v-if="!state.show == false" @click="show()">
        <img src="/colImages/ExpandArrow_l.png" class="expArr">
    </div>
</template>

<script setup lang="ts">
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, watch } from 'vue'
import HomeContent from '../../HomeContent';
import installContent from '../../installMenu/installMenu';
import MessageCode from '../../MessageCode';
const state = reactive({
    rootSubmenuKeys: [''],
    openKeys: [installContent.Default.InstallProData.value[0].Name],
    show: false,
    selectedKeys: [installContent.Default.InstallProData.value[0].Steps[0].Id],
});
function show() {
    state.show = !state.show
}
const onOpenChange = (openKeys: string[]) => {
    const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1);
    if (state.rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
        state.openKeys = openKeys;
    } else {
        state.openKeys = latestOpenKey ? [latestOpenKey] : [];
    }
};

function GetNode(item: any) {
    console.log(item, '触发');
    // let newArr = WebSocketComponent.Default.PostMessageAsync(new ClientMessage.DisassemblyAdapterRequest(MessageCode.Default.MsgCodesList.DISASSEMBLY_STEP_GOTO, `${item.Id}`))
    // newArr.then((res: any) => {
    //     console.log(JSON.parse(res.Content).Result);
    //     if (JSON.parse(res.Content).Success) {
    //         installContent.Default.InstallProData.value = JSON.parse(res.Content).Result
    //     }
    // })
}
function mouseenter() {
    HomeContent.Default.isShowMouseLabel.value = false
}
function mouseleave() {
    HomeContent.Default.isShowMouseLabel.value = true
}
function mousemove() {

}
//监听
watch(() => HomeContent.Default.IDCorrente.value, (newVal, oldVal) => {
    if (newVal != oldVal) {
        installContent.Default.InstallProData.value.forEach((item, index) => {
            item.Steps.forEach((items: any, indexs: any) => {
                if (items.Id == HomeContent.Default.IDCorrente.value) {
                    state.openKeys = [item.Name]
                }
            });
        });
    }
})
onMounted(() => {
    WebSocketComponent.Default.PostMessageAsync(new ClientMessage.DisassemblyAdapterRequest(MessageCode.Default.MsgCodesList.DISASSEMBLY_STEP_GOTO, `${installContent.Default.InstallProData.value[0].Steps[0].Id}`))

})
</script>

<style scoped>
.install_list {
    position: absolute;
    left: 0;
    top: 108px;
    width: 290px;
    height: 637px;
    background-image: url('/colImages/cz_list_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.line {
    position: absolute;
    left: 6px;
    top: 32px;
    width: 274px;
    height: 28px;
}

.tit {
    font-size: 22px;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    color: #ffffff;
    padding-left: 38px;
    padding-top: 12px;
}

.packUp {
    position: absolute;
    right: 4px;
    top: 13px;
    width: 27px;
    height: 32px;
}

.listBox {
    margin-top: 10px;
    width: 290px;
    height: 560px;
}

.ContentListBox {
    width: 284px;
    height: 570px;
    overflow-y: auto;
    overflow-x: hidden;
}

.ContentListBox::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.ContentListBox::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 6px;
    background: #1AF2FF;
}

.ContentListBox::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
}

.expArr {
    width: 27px;
    height: 32px;
    margin-top: 10px;
    margin-left: 13px;
}

.StowedState {
    position: absolute;
    left: 0;
    top: 115px;
    width: 52px;
    height: 52px;
    background-image: url('/colImages/stowedState_l_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

:deep().ant-menu-inline .ant-menu-item-selected::after {
    display: none;
}

:deep().ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background: transparent;
}

:deep().IsCompleteStyle {
    padding-left: 38px !important;
}

:deep().ant-menu-inline {
    border: none;
    background: transparent;
    color: #B1D0F4;
}

:deep().ant-menu-submenu-selected {
    color: #B1D0F4;
}

:deep().ant-menu-item-selected {
    color: #B1D0F4;
}

:deep().ant-menu-submenu-arrow {
    color: #B1D0F4;
}

.skipBox {
    width: 19px;
    height: 22px;
    margin-top: -32px;
}

:deep().textBox {
    max-width: 200px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}

/* .skipBox:hover{
    background-image: url('/colImages/skipBox_sele.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
} */
:deep().ant-menu-title-content {
    text-overflow: clip !important;
    padding-left: 8px;
}

:deep().accomplish {
    color: #1AE2F4 !important;
}

:deep().corrente {
    color: #1890FF !important;
}

.tab_icon {
    width: 36px;
    height: 36px;
    position: absolute;
    left: 0px;
    top: 2px;
}

.tab_icon_2 {
    width: 36px;
    height: 36px;
    position: absolute;
    left: 16px;
    top: -5px;
}
</style>